<template>
    <div class="list-recommend">
        <span class="title_recom">{{ $t('new_game') }}
            <!-- <router-link to="/home/reserve"><span class="more">更多 ></span></router-link> -->
            <a @click="$router.push(url)" target="_blank">
                <span class="more">
                    <span>{{ $t('more') }}</span>
                    <el-icon><ArrowRight /></el-icon>
                </span>
            </a>
        </span>
        <div class="list-inner">
            <div class="list_item">
                <div class="list_item_img">
                    <div class="ad_img" :style="`background-image: url(${$baseUrl+ad_img_url})`"></div>
                </div>
                <div class="game_info">
                    <div @click="toDetail" v-for="item in game_list" class="game_item" :key="item.id" :class="{active: check_item === item.id}" @mouseover="check_item_fn(item.id, item.home_new_game_img)">
                        <div class="game_item_img">
                            <img width="60" :src="$baseUrl+item.icon" alt="">
                        </div>
                        <div class="game-info_2X55m">
                            <div class="game-info-name_1X85G">
                                {{item.title}}
                            </div>
                            <p class="label" :title="item.tag.join(',')">
                                <span v-for="item2,index in item.tag.slice(0,3)" :key="index">{{item2}}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import axios from '@/utils/api'
import { useRouter } from "vue-router"
const url = '/home/reserve'
let ad_img_url = ref('')
let game_id = ref('')
let check_item = game_id

const check_item_fn = (id,img_url) =>{
    check_item.value = id
    ad_img_url.value = img_url
    game_id.value = id
    // console.log(id,img_url);
}

const game_list = reactive([])
const getList = async () =>{
    const banner = await axios.get('/gameNewRecommendList')
    Object.assign(game_list,banner.data)
    // console.log(game_list);
    ad_img_url.value = game_list[0].home_new_game_img
    game_id.value = game_list[0].id
    // console.log(game_id.value);
}
getList()

const router = useRouter()
const toDetail = () =>{
    router.push('/home/gameCenter/'+game_id.value)
}

</script>

<style lang="less" scoped>
.list-recommend {
    margin-top: 20px;
    position: relative;
    .title_recom {
        font-size: 24px;
        color: rgba(0, 0, 0, .8);
        letter-spacing: 1px;
        line-height: 32px;
       
        .more{
            font-size: 12px;
            color: rgba(0, 0, 0, .6);
            position: absolute;
            right: 0;
            top: 3px;
            border: 1px solid rgba(0, 0, 0, .2);
            height: 22px;
            line-height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .more:hover{
            background-color: rgb(241, 241, 241);
            
        }
    }

    .list-inner {
        display: flex;
        justify-content: space-between;
        .list_item {
            width: 100%;
            box-sizing: border-box;
            border-radius: 10px;
            margin: 16px 0;
            transition: .3s;
            cursor: pointer;
            .list_item_img{
                transition: all .3s;
                .ad_img{
                    width: 100%;
                    height: 250px;
                    transition: all .2s;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border-radius: 12px;
                }
            }
            .list_item_img img{
                border-radius: 10px;
                border: 1px solid rgba(0, 0, 0, .1);
                object-fit: cover;
            }
            .list_item_img:hover{
                transform: scale(1.05);
            }
            .game_info{
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                
                .game_item{
                    margin: 0;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    border: 1px solid rgba(0, 0, 0, .25);
                    border-radius: 10px;
                    max-width: 225px;
                    height: 85px;
                    padding: 11px 10px;
                    cursor: pointer;
                    opacity: .35;
                    .game-info_2X55m{
                        font-size: 14px;
                        margin-left: 10px;
                        .game-info-name_1X85G{
                            width: 120px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-left: 0;
                        }
                        .label{
                            margin-top: 8px;
                            word-break: break-all;
                            /* height: 50px; */
                            line-height: 15px;
                            span{
                                border: 1px solid #1281d2;
                                color: #1281d2;
                                margin-right: 2px;
                                padding: 1px 5px;
                                font-size: 12px;
                                border-radius: 10px;
                                cursor: pointer;
                                margin-bottom: 5px;
                                max-width: 46px;
                                height: 15px;
                                display: inline-block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                word-break: keep-all;
                                white-space: nowrap;
                            }
                        }
                    }
                }
                .game_item:hover{
                    position: relative;
                    opacity: 1;
                    border: 2px solid #24b8f2;
                    border-radius: 10px;
                }
                .game_item.active{
                    position: relative;
                    opacity: 1;
                    border: 2px solid #24b8f2;
                    border-radius: 10px;
                }
                .game_item:hover::before,.game_item.active::before{
                    content: "";
                    position: absolute;
                    top: -12px;
                    left: 49px;
                    width: 0;
                    height: 0;
                    border-width: 0 5px 6px;
                    border-style: solid;
                    border-color: transparent transparent #24b8f2;
                }
                .game_item_img{
                    img{
                        border-radius: 14px;
                    }
                    
                }
            }
            
        }
    }
}
</style>